<template>
  <div class="container">
    <div class="card-info card">
      <van-cell-group>
        <van-field v-model="info.name" label="学生姓名"/>
        <van-field v-model="info.phone" label="手机号码"/>
        <!--<van-field v-model="displayInfo.kcname" label="课程名称" disabled @click="toSelect('courseList', 1)"/>-->
        <van-field v-model="info.kcname" label="课程名称"/>
        <van-field v-model="info.price" label="单节课程费用"/>
        <van-field v-model="info.number" label="剩余课时" disabled @click="showTip"/>
        <van-field v-model="displayInfo.status" label="缴费情况" disabled @click="toSelect('statusList', 2)"/>
        <van-field v-model="info.total_price" label="已缴金额"/>
        <van-field v-model="displayInfo.source" label="学费来源" disabled @click="toSelect('sourceList', 3)"/>
        <!--<van-field v-model="info.residue" label="学费剩余课时"/>-->
      </van-cell-group>
    </div>
    <router-link :to="`/studentCheck?id=${info.student_id}`">
      <div class="card-link card">打卡记录</div>
    </router-link>
    <honor :title="'TA的荣誉'" :showAdd="false" class="card"/>
    <div class="btns">
      <van-button type="info" plain hairline :to="`/urge?id=${info.student_id}&num=${info.residue}`">催缴学费</van-button>
      <van-button type="info" @click="toSubmit">保存</van-button>
    </div>
    <van-action-sheet :title="title" v-model="showSelect" :actions="action" @select="onSelect" :round="false"/>
  </div>
</template>

<script>
import honor from '@/components/honor'
import api from '@/api'
export default {
  name: 'student-edit',
  data () {
    return {
      info: {
        profile_id: '',
        student_id: '',
        name: '',
        phone: '',
        price: '',
        number: '',
        status: '',
        total_price: '',
        source: '',
        residue: '',
        kcname: ''
      },
      displayInfo: {
        name: '',
        kcname: '',
        source: '',
        status: ''
      },
      courseList: [],
      statusList: [{name: '已缴清', value: '1'}, {name: '未缴清', value: '2'}],
      sourceList: [{name: '微信', value: '1'}, {name: '支付宝', value: '2'}, {name: '现金', value: '3'}, {name: '银行卡转账', value: '4'}],
      action: [],
      showSelect: false,
      titles: ['', '请选择课程', '请选择缴费状态', '请选择缴费来源'],
      title: '',
      activeIndex: 1
    }
  },
  methods: {
    toSelect (key, index) {
      this.action = this[key]
      this.title = this.titles[index]
      this.activeIndex = index
      this.showSelect = true
    },
    onSelect (item) {
      switch (this.activeIndex) {
        case 1:
          this.info.profile_id = item.value
          this.displayInfo.kcname = item.name
          break
        case 2:
          this.info.status = item.value
          this.displayInfo.status = item.name
          break
        case 3:
          this.info.source = item.value
          this.displayInfo.source = item.name
          break
      }
      this.showSelect = false
    },
    getCourseList () {
      api.teacherCourseList({
        params: {teacher_id: JSON.parse(sessionStorage.getItem('user')).id},
        callback: res => {
          if (res.data.error_code === 0) {
            let temp = []
            res.data.data.forEach(item => {
              temp.push({name: item.kcname, value: item.profile_id})
            })
            this.courseList = temp
          }
        }
      })
    },
    toSubmit () {
      api.teacherStudentEditor({
        params: this.info,
        callback: res => {
          this.$toast({
            message: res.data.message,
            duration: 1000
          })
        }
      })
    },
    initStudent () {
      let params = {
        student_id: this.info.student_id,
        teacher_id: JSON.parse(sessionStorage.getItem('user')).id
      }
      api.teacherStudentDetail({
        params,
        callback: res => {
          if (res.data.error_code === 0 && res.data.data) {
            if (res.data.data.B) {
              Object.keys(this.info).forEach(key => {
                this.info[key] = res.data.data.B[key]
              })
              if (res.data.data.B.source) {
                this.displayInfo.source = this.sourceList[res.data.data.B.source - 1].name
              }
              if (res.data.data.B.status) {
                this.displayInfo.status = this.statusList[res.data.data.B.status - 1].name
              }
              if (res.data.data.B.kcname) {
                this.displayInfo.kcname = res.data.data.B.kcname
              }
            }
            if (res.data.data.A) {
              this.info.name = res.data.data.A.name
              this.info.phone = res.data.data.A.phone
            }
            this.info.number = res.data.data.syks
          }
        }
      })
    },
    showTip () {
      this.$dialog.alert({
        message: '请到课程表具体课节修改剩余课时！'
      }).then(() => {
        // on close
      })
    }
  },
  components: {
    honor
  },
  created () {
    this.getCourseList()
    this.info.student_id = this.$route.query.sid
    if (this.info.student_id) {
      this.initStudent()
    }
  }
}
</script>

<style scoped>
  .container{
    padding: 15px;
    box-sizing: border-box;
    background-color: #F2F2F2;
  }
  .card{
    background-color: #fff;
    border-radius: 6px;
    overflow: hidden;
  }
  .card-link{
    padding: 15px;
    margin: 10px 0;
    font-size:16px;
    font-family:PingFang SC;
    font-weight:bold;
    line-height:22px;
    color:rgba(58,127,226,1);
  }
</style>
